<template>
  <el-container>
    <!--条件查询-->
    <el-header>
      始发站:
      <el-select v-model="ticFrom.sfz" placeholder="始发站" style="width: 100px">
        <el-option label="全部" value="0"></el-option>
        <el-option label="北京" value="1"></el-option>
        <el-option label="南京" value="2"></el-option>
        <el-option label="武汉" value="3"></el-option>
        <el-option label="上海" value="4"></el-option>
      </el-select>
      乘车日期:
      <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ticFrom.startDate"
                      style="width: 200px"></el-date-picker>
      <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ticFrom.endDate"
                      style="width: 200px"></el-date-picker>
      姓名:
      <el-input v-model="ticFrom.key" style="width: 100px"></el-input>

      <el-button type="primary" @click="list">查询</el-button>
    </el-header>

    <!--列表-->
    <div>
      <el-table
        :data="ticketList"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          label="购票人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="sfz"
          label="始发站"
          width="120">
        </el-table-column>
        <el-table-column
          prop="ddz"
          label="到达站"
          width="120">
        </el-table-column>
        <el-table-column
          prop="buyDate"
          label="购票时间"
          width="300">
        </el-table-column>
        <el-table-column
          prop="useDate"
          label="乘车日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="price"
          label="票价"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--列表分页  @current-change 直接写列表绑定数据-->
      <el-pagination
        @current-change="list"
        :current-page.sync="ticFrom.pageNum"
        :page-size="ticFrom.pageSize"
        layout="total, prev, pager, next"
        :total="ticFrom.total">
      </el-pagination>
    </div>
  </el-container>
</template>

<script>
export default {
  name: 'TicketView',
  data: function () {
    return {
      ticketList: [], // 列表
      ticFrom: { // 条件查询
        pageNum: 1,
        pageSize: 3,
        total: 0,
        sfz: 0,
        key: '',
        startDate: '',
        endDate: ''
      }
    }
  },
  methods: {
    // 列表 res.data --》返回的数据 Result  , res.data.data ---》Result里的 data  ，res.data.data.records --- 》 最终数据的分页数据
    list: function () {
      console.log('列表当前页---' + this.ticFrom.pageNum)
      this.axios.post('/ticket/list', this.ticFrom).then(res => {
        this.ticketList = res.data.data.records
        this.ticFrom.pageNum = res.data.data.current
        this.ticFrom.pageSize = res.data.data.size
        this.ticFrom.total = res.data.data.total
      })
    },
    // 删除
    del: function (id) {
      this.axios.get('/ticket/del', { params: { id: id } }).then(resp => {
        if (resp.data.code === 200) {
          this.$message.info('删除成功')
          this.list()
        }
      })
    }
  },
  // 文档就绪函数
  created () {
    // 列表数据
    this.list()
  }
}
</script>

<style scoped>

</style>
